<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 资料申报  申报界面-->

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
        <el-container style=" border: 1px solid #eee; ">

        <el-aside width="350px" style="background-color:#E9EEF3;" >

        <el-tree :data="dataTree" :props="defaultProps" accordion @node-click="handleNodeClick " style="background-color:#E9EEF3;"></el-tree>
        </el-aside>
        <el-main style="padding:0px">
        <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
                        v-for="(item, index) in editableTabs2"
                        :key="item.name"
                :label="item.title"
                 :name="item.name" >
        <div class="iframe-container">
        <span v-html = "item.content"></span>
        </div>
        </el-tab-pane>
        </el-tabs>
        </el-main>

        </el-container>
        </div>

        </body>
        <script>
    var vm=new Vue({
        el: '#app',
        data: {
            dataTree: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            loading:false,
            searchForm: {
                yearid: '',
            },
            years: [],
            icon:'el-icon-menu',
            editableTabsValue2: '2',
            editableTabs2:[
                {title: '首页',
                    name: '2',
                    content: "<iframe src='/dataquery/main' frameborder=\"no\" scrolling=\"no\"  style=\"width:100%;height:1200px;\"> </iframe>"
                }
            ],
            tabIndex: 2
        },
        created: function () {
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.pageSize;
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            axios.post('/dataquery/treelist',{'start':start,'end':end}).then(function (response) {
                self.years=response.data.years;
                self.dataTree = response.data.treeList;
            })
        },
        methods: {
            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                //根据条件查询
                var searchForm={'start':start,'end':end,'yearid':this.searchForm.yearid};
                //   alert(JSON.stringify(searchForm));
                axios.post('/dataquery/treelist',searchForm).then(function(response){
                    console.log(response.data);
                    _self.years = response.data.years;
                    _self.dataTree = response.data.treeList;
                });
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
            //二级联动事件
            changeYear:function(){
                var _self=this;
                _self.loadingData();

            } ,

            handleNodeClick: function(data) {
                //alert(data.url+data.label);
                var url = data.url;
                var title = data.label;
                var id= data.id;
                //alert(id);
                //alert(data.id);
                var content = "<iframe src='"+url+"?title="+title+"' frameborder=\"no\" scrolling=\"no\"  style=\"width:100%;height:1000px;\"> </iframe>";
                if(url!=null&&url!='null'&&url!='') {
                    this.addTab(content, title);
                }
            },
            addTab: function (content, title) {
                let newTabName = title;
                //alert(content);
                if (JSON.stringify(this.editableTabs2).indexOf(newTabName) == -1) {
                    this.editableTabs2.push({
                        title: newTabName,
                        name: newTabName,
                        content: content
                    });
                }

//        this.editableTabs2=[{
//            title: title,
//            name: newTabName,
//            content: content
//        }];
                this.editableTabsValue2 = newTabName;
            },

            removeTab: function (targetName) {
                let tabs = this.editableTabs2;
                let activeName = this.editableTabsValue2;
                if (activeName === targetName) {
                    tabs.forEach(function(tab, index)  {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue2 = activeName;
                this.editableTabs2 = tabs.filter(function(tab){return tab.name !== targetName;
                });

            }
        }

    })
</script>
</html>